<template>
  <div>
    <my-breadcrumb :item="[]"></my-breadcrumb>
    <h2>昨日总览</h2>
    <div class="yesterday">
      <Card>
        <ul>
          <li v-for="(item, index) in yesterday" :key="index">
            <p v-for="(p, index) in item" :key="index">{{ p.name }}：{{ p.value }}</p>
          </li>
        </ul>
      </Card>
    </div>
    <h2>数据总览</h2>
    <Row :gutter="16">
      <i-col span="8">
        <Card>
          <div style="width: 100%;height: 350px;" ref="classify"></div>
        </Card>
      </i-col>
      <i-col span="8">
        <Card>
          <div style="width: 100%;height: 350px;" ref="method"></div>
        </Card>
      </i-col>
      <i-col span="8">
        <Card>
          <div style="width: 100%;height: 350px;" ref="source"></div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
let Echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
export default {
  name: 'home',
  data () {
    return {
      url: {
        info: '/split/count/all',
        time: '/split/count/register/number'
      },
      yesterday: []
    }
  },
  methods: {
    initClassify (data) {
      let classify = []
      data.forEach(item => {
        classify.push({
          name: item.categoryName,
          value: item.count
        })
      })
      Echarts.init(this.$refs.classify).setOption({
        title: {
          text: '根据分类统计销量'
        },
        backgroundColor: '#f8f8f9',
        series: [{
          name: '分类销量',
          type: 'pie',
          radius: '45%',
          data: classify
        }],
        tooltip: {},
        legend: {
          bottom: '10'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      })
    },
    paymentMethod (data) {
      let method = [
        {
          name: '微信支付',
          value: data.wxPaymentCount
        },
        {
          name: '余额支付',
          value: data.balancePaymentCount
        }
      ]
      Echarts.init(this.$refs.method).setOption({
        title: {
          text: '支付类型占比'
        },
        backgroundColor: '#f8f8f9',
        series: [{
          name: '支付类型',
          type: 'pie',
          radius: '45%',
          data: method
        }],
        tooltip: {},
        legend: {
          bottom: '10'
        }
      })
    },
    paymentSource (data) {
      let method = [
        {
          name: '小程序',
          value: data.smallProgramPaymentSourceCount,
          itemStyle: {
            color: '#61a0a8'
          }
        },
        {
          name: '微信网页',
          value: data.wxWebPagePaymentSourceCount,
          itemStyle: {
            color: '#d48265'
          }
        }
      ]
      Echarts.init(this.$refs.source).setOption({
        title: {
          text: '支付来源占比'
        },
        backgroundColor: '#f8f8f9',
        series: [{
          name: '支付来源',
          type: 'pie',
          radius: '45%',
          data: method
        }],
        tooltip: {},
        legend: {
          bottom: '10'
        }
      })
    }
  },
  mounted () {
  },
  created () {
    let now = new Date().valueOf()
    let ysDay = now - (24 * 3600 * 1000)
    this.$ajax.post(this.url.info, {startTime: ysDay, endTime: now}).then(res => {
      if (res.data.success) {
        let data = res.data.data
        this.initClassify(data.goodsCategoryScaleVoList)
        this.paymentMethod(data.paymentMethodScaleVo)
        this.paymentSource(data.paymentSourceScaleVo)
        this.yesterday.push([
          {name: '昨日下单数', value: data.paymentNumber},
          {name: '成交订单数', value: data.dealLowerSingular},
          {name: '取消订单数', value: data.cancelLowerSingular}
        ])
        this.yesterday.push([
          {name: '昨日订单额度', value: data.orderMagnitude / 100 + '￥'},
          {name: '昨日订单收入', value: data.orderTotalIncome / 100 + '￥'}
        ])
      }
    })
  }
}
</script>

<style scoped>
  h2{
    margin-bottom: 10px;
  }
  .yesterday{
    margin-bottom: 16px;
  }
  .yesterday ul{
    overflow: hidden;
  }
  .yesterday ul li{
    float: left;
    width: 200px;
    height: 100px;
  }
  .yesterday ul li p{
    height: 30px;
    line-height: 30px;
  }
</style>
